// // import { Directive, Input, HostListener, ElementRef } from '@angular/core';
// // import { DragDropService } from '../services/drag-drop.service';
// // import { DraggableItem } from '../models/layout.models';
// //
// // @Directive({
// //   selector: '[appDraggable]',
// //   standalone: true
// // })
// // export class DraggableDirective {
// //   @Input() appDraggable!: DraggableItem;
// //
// //   constructor(
// //     private el: ElementRef,
// //     private dragDropService: DragDropService
// //   ) {}
// //
// //   @HostListener('dragstart', ['$event'])
// //   onDragStart(event: DragEvent) {
// //     if (event.dataTransfer) {
// //       event.dataTransfer.setData('application/json', JSON.stringify(this.appDraggable));
// //       event.dataTransfer.effectAllowed = 'move';
// //       this.el.nativeElement.classList.add('dragging');
// //       this.dragDropService.setDragItem(this.appDraggable);
// //     }
// //   }
// //
// //   @HostListener('dragend', ['$event'])
// //   onDragEnd(event: DragEvent) {
// //     this.el.nativeElement.classList.remove('dragging');
// //     this.dragDropService.clearDragItem();
// //   }
// // }
//
// import { Directive, Input, HostListener, ElementRef } from '@angular/core';
// import { DragDropService } from '../services/drag-drop.service';
// import { DraggableItem } from '../models/layout.models';
//
// @Directive({
//   selector: '[appDraggable]',
//   standalone: true
// })
// export class DraggableDirective {
//   @Input() appDraggable!: DraggableItem;
//
//   constructor(
//     private el: ElementRef,
//     private dragDropService: DragDropService
//   ) {}
//
//   @HostListener('dragstart', ['$event'])
//   onDragStart(event: DragEvent) {
//     if (event.dataTransfer) {
//       event.dataTransfer.setData('application/json', JSON.stringify(this.appDraggable));
//       event.dataTransfer.effectAllowed = 'move';
//       this.el.nativeElement.classList.add('dragging');
//       this.dragDropService.setDragItem(this.appDraggable);
//     }
//   }
//
//   @HostListener('dragend', ['$event'])
//   onDragEnd(event: DragEvent) {
//     this.el.nativeElement.classList.remove('dragging');
//     this.dragDropService.clearDragItem();
//   }
// }
import { Directive, Input, HostListener, ElementRef } from '@angular/core';
import { DragDropService } from '../services/drag-drop.service';
import { DraggableItem } from '../models/layout.models';

@Directive({
  selector: '[appDraggable]',
  standalone: true
})
export class DraggableDirective {
  @Input() appDraggable!: DraggableItem;

  constructor(
    private el: ElementRef,
    private dragDropService: DragDropService
  ) {}

  @HostListener('dragstart', ['$event'])
  onDragStart(event: DragEvent) {
    if (event.dataTransfer) {
      event.dataTransfer.setData('application/json', JSON.stringify(this.appDraggable));
      event.dataTransfer.effectAllowed = 'move';
      this.el.nativeElement.classList.add('dragging');
      this.dragDropService.setDragItem(this.appDraggable);
    }
  }

  @HostListener('dragend', ['$event'])
  onDragEnd(event: DragEvent) {
    this.el.nativeElement.classList.remove('dragging');
    this.dragDropService.clearDragItem();
  }
}
